<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.product {
				width: 100px;
				height: 50px;
				/* border: 1px solid red; */
				display: inline-block;
			}

			.ductList {
				/* width:1200px ; */
				height: 200px;
				display: none;
				/* border: 1px solid orange; */
				position: absolute;
				left: 10px;
				top: 130px;
				background-color: #FFFFFF;
			}

			.product:hover .ductList {
				display: block;
				z-index: 3;
			}

			input {
				height: 48px;
				width: 200px;
				margin-top: -10px;
				position: relative;
				top: -19px;
				border: #E8E8E8 solid 1px;
				outline: orangered;

			}

			#search {
				display: inline-block;
				position: relative;
				right:20px;
				top:15px;


			}

			button {
				background-color: transparent;
				border: #E8E8E8 solid 1px;
				height: 52px;
				overflow: hidden;
				outline: none;
				border-left:0px ;
			}

			#search:hover input {
				border: 1px solid orangered;
			}

			#search:hover button {
				border: 1px solid orangered;

			}

			.phone {
				height: 180px;
				width: 195px;
				display: inline-block;
				border-right: 1px solid darkgray;

			}

			.phone img {
				height: 100px;
				width: 195px;

			}

			#icon {
				border-radius: 18px;
				display: inline-block;
				background-image: url(xiaomi/logo.png);
				width: 50px;
				height: 50px;
				margin-right: 150px;
				position: relative;
				top: 15px;
			}

			.product:hover span {
				color: orangered;
				transition: 0.3s;
			}

			#menu {
				background-color: #696969;
				color: #FFFFFF;
				width: 234px;
				height: 460px;
				font-size: 14px;
				float: left;
				opacity: 0.7;
			}

			.menu {
				height: 460px;
				/* border: 1px solid red; */
				position: absolute;
				top:140px;
				left: 290px;
				width: 600px;
				display: none;
				z-index: 5;
				background-color: #FFFFFF;
				opacity: 1;
			}
			ul li{
				line-height: 20px;
				height: 40px;
				margin-left: -40px;
				padding-left: 40px;
				
			}
			ul li:hover{
				background-color: orange;
			}
			ul li:hover .menu{
				display: block;
			}
			#lunbo{
				float: left;
				width:850px ;
				height: 460px;
				
			}
			#lunimg{
				width: 100%;
				height: 100%;
			}
			#top{
				height:50px;
				background-color:#363636 ;
			}
			#top div{
				display: inline-block;
				margin-right: 3px;			
			}
			.weizhi{
				position: relative;
				top: -16px;
			}
			#top div a{
				color: #B5B5B5;
				font-size: 12px;
			}
			#top .right button{
				background-color: #4F4F4F;
				height: 50px;
				width: 150px;
				color:#B5B5B5 ;
				text-align: center;
				border: 0px;
			}
			#top .right button img{
				
				height: 20px;
				width: 20px;
				margin-right: 5px;
			}
			#top .right{
				
			}
			#car:hover button{
				background-color: #FFFFFF;
				color: orangered;
				transition: 0.3s;
			}
			#car2,#car1{
				
				height: 20px;
				width: 20px;
				margin-right: 5px;
			    position: absolute;
			    left: 1041px;
			    top: 21px;
				margin-right: 5px;
			}
			#car2{
				display: none;
			}
			#car:hover button #car2{
				display: block;
			}
			#car:hover button #car1{
				display: none;
			}
			#cartext{
			position: absolute;
			    left: 1070px;
			    top: 21px;
			}
			
			
		</style>
	</head>
	<body>
		<div>
			<div id="top">
				<div style="margin-left: 80px;" class="weizhi">
					<a>小米官网</a>
				</div>
				<div class="weizhi">
					<a>小米商城</a>
				</div>
				<div class="weizhi">
					<a>MIUI</a>
				</div>
				<div class="weizhi">
					<a>loT</a>
				</div>
				<div class="weizhi">
					<a>云服务</a>
				</div>
				<div class="weizhi">
					<a>天星数科</a>
				</div>
				<div class="weizhi">
					<a>有品</a>
				</div>
				<div class="weizhi">
					<a>小爱开放平台</a>
				</div>
				<div class="weizhi">
					<a>资质证照</a>
				</div>
				<div class="weizhi">
					<a>协议规则</a>
				</div>
				<div class="weizhi">
					<a>下载app</a>
				</div>
				<div class="weizhi">
					<a>Select Location</a>
				</div>
				<div class="right weizhi" style="margin-left: 150px;">
					<a>登录</a>
				</div>
				<div class="right weizhi">
					<a>注册</a>
				</div>
				<div class="right weizhi">
					<a>消息通知</a>
				</div>
				<div class="right" id="car">
					<button>
						<img id="car1" src="xiaomi/car/c1.png"/>
						<img id="car2" src="xiaomi/car/c2.png"/>
						<span id="cartext">购物车</span>
					</button>
				</div>				
			</div>
			<div id="head" style="margin-left: 50px;width: 92%;">
				<div id="icon">

				</div>
				<div class="product">
					<span>
						手机
					</span>
					<div class="ductList">
						<div class="phone">
							<div>
								<img src="xiaomi/phone/p1.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate60pro
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								6999
							</div>

						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/phone/p2.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								荣耀
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								2999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/phone/p3.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/phone/p4.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate40pro保时捷
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								9999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/phone/p5.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate50pro
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								4999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/phone/p6.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate60
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								5999
							</div>
						</div>
					</div>
				</div>
				<div class="product">
					<span>
						电脑
					</span>
					<div class="ductList">
						<div class="phone">
							<div>
								<img src="xiaomi/com/c1.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/com/c2.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/com/c3.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/com/c4.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/com/c5.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/com/c6.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
					</div>
				</div>
				<div class="product">
					<span>
						家电
					</span>
					<div class="ductList">
						<div class="phone">
							<div>
								<img src="xiaomi/jiadian/j1.png" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/jiadian/j2.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/jiadian/j3.png" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/jiadian/j4.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/jiadian/j5.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/jiadian/j6.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
					</div>
				</div>
				<div class="product">
					<span>
						耳机
					</span>
					<div class="ductList">
						<div class="phone">
							<div>
								<img src="xiaomi/erji/e1.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/erji/e2.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/erji/e3.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/erji/e4.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/erji/e5.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/erji/e6.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>

					</div>
				</div>
				<div class="product">
					<span>
						箱包
					</span>
					<div class="ductList">
						<div class="phone">
							<div>
								<img src="xiaomi/xaingbao/x1.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/xaingbao/x2.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/xaingbao/x3.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/xaingbao/x4.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/xaingbao/x5.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/xaingbao/x6.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
					</div>
				</div>
				<div class="product">
					<span>
						其它
					</span>
					<div class="ductList">
						<div class="phone">
							<div>
								<img src="xiaomi/qita/q1.png" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/qita/q2.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/qita/q3.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/qita/q4.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/qita/q5.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
						<div class="phone">
							<div>
								<img src="xiaomi/qita/q6.jpg" />
							</div>
							<div style="text-align: center;line-height: 40px;">
								华为mate30
							</div>
							<div style="text-align: center;color: orangered;line-height: 40px;">
								3999
							</div>
						</div>
					</div>
				</div>
				<div id="search">
					<input type="text" />
					<button style="margin-left: -5px;">
						<img src="xiaomi/search.jpg" height="47px" />
					</button>
				</div>

			</div>
			<div id="showArea" style="margin-left: 50px;width: 92%;">
				<div id="menu">
					<div style="height: 22px;"></div>
					<ul style="list-style: none;">						
						<li style="">
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>
						<li>
							手机
							<div class="menu"></div>
						</li>

					</ul>
				</div>
				<div id="lunbo">
					<img id="lunimg"/>
				</div>
			</div>

		</div>
	</body>
	<script>
	var imgsrc=["xiaomi/lunbo/l1.jpg",
	"xiaomi/lunbo/l2.jpg",
	"xiaomi/lunbo/l3.jpg",
	"xiaomi/lunbo/l4.jpg",
	"xiaomi/lunbo/l5.jpg",
	"xiaomi/lunbo/l6.jpg",
	"xiaomi/lunbo/l7.jpg",
	"xiaomi/lunbo/l8.jpg",
	"xiaomi/lunbo/l9.jpg"]
	var lunbo=document.getElementById("lunimg");
	var index=0;
	
	window.setInterval(function(){
		lunbo.src=imgsrc[index]		
		index++
		if(index==imgsrc.length){
			index=0
		}
	},2000)
	
	</script>
</html>
